<%--
Created by IntelliJ IDEA.
User: SongTiantian
Date: 2020/11/18
Time: 17:33
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <%@include file="/front-end/views/common/head.jsp"%>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #top{
            width: 100%;
            height:80px;
            background-color: #eb002a;
        }
        #top p{
            color:white;
            font-size: 40px;
            padding-left:50px;
            padding-top:10px;
        }
        #main{
            width: 100%;
            height:550px;
            /* background-color: pink; */
        }
        #main-left{
            float:left;
        }
        #main-left img{
            width: 500px;
            height:300px;
            margin-left:100px;
            margin-top:120px;
        }
        /* #xian{
            margin-left:100px;
            margin-top:500px;
            float:left;
            width:5px;
            height:150px;
            margin-top:50px;
            background-color:#eb002a ;
        

        } */
        #main-right{
            float:left;
            margin-left:200px;
            margin-top:150px;
            width: 500px;
            height:300px;
            /* border:2px solid black; */
        }
        #bottom{
            width:100%;
        }
        #bottom img{
            width:100%;
            height:80px;
        }
        #main-right input{
            padding-left: 5px;
            width:250px;
            height:35px;
            border-radius: 10px;
            outline:none;
        }
        #main-right p{
            font-size: 20px;
        }
        #submit{
            margin-top: 20px;
            width:260px;
            height: 40px;
            background-color: #eb002a;
            color: white;
            font-size: 20px;
            border:3px solid #eb002a;
            border-radius: 10px;
        }
        #submit:hover{
            background-color:  white;
            color:  #eb002a;
            border:3px solid #eb002a;
        }
    </style>
</head>
<body>
    <div id="top">
        <p>淘票票</p>
    </div>
    <div id="main">
        <div id="main-left">
            <img src="front-end/img/111.png" alt="">
        </div>
        <div id="main-right">
            <span class="errorMsg">${ empty requestScope.msg ? "请输入用户名和密码":requestScope.msg }</span><br>
            <form action="userServlet" method="post">
                <input type="hidden" name="action" value="login">
                <a style="color: #c81623" href="regist.jsp">没有账号，立即注册</a><br>
                <label>手机号码：</label>
                <input class="itxt" type="text" placeholder="请输入手机号码"
<%--                       value="${requestScope.phone}"--%>
                       value="12345678910"
                       autocomplete="off" tabindex="1" name="phone" id="phone" />
                <br />
                <br />
                <label>用户密码：</label>
                <input class="itxt" type="password" placeholder="请输入密码"
<%--                       value="${requestScope.password}"--%>
                       value="hahaha"
                       autocomplete="off" tabindex="1" name="password" id="password" />
                <br />
                <br />
                <input type="submit" value="登录" id="sub_btn" />
            </form>
        </div>

    </div>
    <div id="bottom">
        <img src="front-end/img/hahaha.png" alt="">
    </div>
    
</body>
<script>

    $(function () {
        // 给注册绑定单击事件
        $("#sub_btn").click(function () {

            // 手机号验证：1xxxxxxxxxx
            //1 获取手机号里的内容
            var phoneText = $("#phone").val();
            //2 创建正则表达式对象
            var phonePatt = /^1[0-9]{10}$/;
            //3 使用test方法验证是否合法
            if (!phonePatt.test(phoneText)) {
                //4 提示用户
                $("span.errorMsg").text("手机号格式不合法！");

                return false;
            }

            // 验证密码：必须由字母，数字下划线组成，并且长度为5到12位
            //1 获取用户名输入框里的内容
            var passwordText = $("#password").val();
            //2 创建正则表达式对象
            var passwordPatt = /^\w{5,12}$/;
            //3 使用test方法验证
            if (!passwordPatt.test(passwordText)) {
                //4 提示用户结果
                $("span.errorMsg").text("密码不合法！");

                return false;
            }
            // 去掉错误信息
            $("span.errorMsg").text("");

        });

    });
    
</script>
</html>